import React, {useState, useEffect} from'react';
import { useLocation } from'react-router-dom';
import { NavBar, Button, Toast,  } from 'antd-mobile';
import { useNavigate } from'react-router-dom';
import styles from '../../css/Wyx/xiangqing.module.css' 
import axios from 'axios'

// 任务详情页面
function LiShiXiangQing() {
    const navigate = useNavigate();
    const location = useLocation();
    let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
    const [id, setId] = useState('')
    const [info, setInfo] = useState({})
    useEffect(() => {
        console.log(location, 'location');
        let id = location.search.split('=')[1]
        setId(id)
        axios.get(`http://127.0.0.1:3000/xin/lishixiangqing?id=${id}`,
            {
                headers: {
                  'Authorization': accessToken
                }
            }
        ).then(res=>{
            if(res.data.code===200){
                setInfo(res.data.result)
            }
        }
        )
       
    }, [location])

     // 点击返回历史任务页面
    const back = () => {
        navigate('/lishi')
    }
    
    return (
        <div className={styles.xiang}>
            <NavBar onBack={back} style={{backgroundColor: "#6a7d8f", color: "white", height: "6rem"}}>任务详情</NavBar>
            <div style={{backgroundColor: "white", padding: "0.5rem 1.5rem 2rem"}}>
                <div style={{display: "flex", justifyContent: "space-between"}}>
                    <div style={{height: "66px", display: "flex", flexDirection: "column", justifyContent: "space-evenly"}}>
                        <span>等待抢单</span>    
                        <span>抢单成功后，请在第一时间预约客户</span>
                    </div>
                    <div style={{display: "flex", alignItems: "center", color: "red"}}><b>￥{info.price}</b></div>
                </div>
                <div style={{display: "flex", justifyContent: "space-between"}}>
                    <Button style={{width: "100%", color: "black", border: "1px solid black"}} onClick={() => {
                        // Toast.show('点击了查看评价')
                        navigate('/pingjia')
                    }}>
                        查看评价
                    </Button>
                </div>
            </div>
            
            <div className={styles.xiang_content}>
                <p>任务详情</p>
                <div className={styles.xiang_shang}> 
                    <div className={styles.xiang_shang1}>
                        <div>发布日期</div>
                        <div style={{fontSize: "2rem", color: "black"}}>{info.fabudate}</div>
                    </div>
                    <div className={styles.xiang_shang2}>
                        <div className={styles.xiang_shang21}>
                            <div>测量日期</div>
                            <div style={{fontSize: "2rem", color: "black"}}>{info.celiangdate}</div>
                        </div>
                        <div className={styles.xiang_shang22}>
                            {info.celiangtime}
                        </div>
                    </div>
                </div>
                <p>
                    <span>客户</span>
                    <span style={{width: "18rem", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                        <span>{info.kehu}</span>
                        <span style={{margin: "0.5rem"}}>{info.kehuphone}</span>
                        <img src='/img/phone.png' style={{width: "2rem"}} alt="" />
                    </span>
                </p>
                <p>
                    <span>导购</span>
                    <span style={{width: "18rem", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                        <span>{info.daogou} </span>
                        <span style={{margin: "0 0.5rem"}}>{info.daogouphone} </span>
                        <img src='/img/phone.png' style={{width: "2rem"}} alt="" />
                    </span>
                </p>

                <p>
                    <span>测量地址</span>
                    <span>{info.address}</span>
                </p>
                <p>
                    <span>确认预约日期</span>
                    <span>{info.yuyuedate}</span>
                </p>
                <p>
                    <span>外出登记时间</span>
                    <span>{info.waichudate}</span>
                </p>
            </div>
        </div>
    )
}

export default LiShiXiangQing;